<template>
	<view class="team-context">
		<NavBar title="我的团队" />
		<ul>
			<li v-for="item,index in teamList" :key="index" @click="change(index)"><a :class="choose==index?'current':''">{{item.text}}</a></li>
		</ul>
	</view>
</template>

<script setup>
	import NavBar from '../../../components/nav-bar'
	import {ref} from 'vue'
	
	const choose = ref(0)
	const change = (index) =>{
		choose.value = index	
	}
	const teamList = [{
			text: '一级团队'
		},
		{
			text: '二级团队'
		},
		{
			text: '三级团队'
		}
	]
</script>

<style lang="scss" scoped>
	.mission-context {
		background-color: #f0f0f0;
		height: 100vh;
	}
	.current{
		border-bottom: 2px #faca2a solid;
	}
	a{
		font-size: 14px;
		width: 100%;
		height: 2rem;
		display: block;
	}
	ul{
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		width: 92%;
		height: 2rem;
		background: #f4f4f4;
		margin-top: 1rem;
		margin-left: 4%;
		border-radius: 2rem;
		float: left;
	}
	li{
		width: 33%;
		line-height: 2rem;
		text-align: center;
	}
	.current{
		background: linear-gradient(to right, #f5bc00 , #ffaf01);
		color: white;
		border-radius: 2rem;
	}
</style>